import { templates } from "@/app/templates/templates";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { cn } from "@/lib/utils";
import { useState } from "react";

interface ResumeTemplateDialogProps {
  open: boolean;
  onClose: () => void;
  onSelect: (templateCode: string | null) => void;
}

export default function ResumeTemplateDialog({
  open,
  onClose,
  onSelect,
}: ResumeTemplateDialogProps) {
  const [selectedTemplate, setSelectedTemplate] = useState<string | null>(null);
  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>选择模板</DialogTitle>
        </DialogHeader>
        <div className="flex   justify-center items-start gap-10">
          {templates.map((template) => {
            return (
              <div
                key={template.code}
                onClick={() => setSelectedTemplate(template.code)}
                className={cn(
                  "cursor-pointer",
                  selectedTemplate === template.code && "border-2 border-blue-500"
                )}
              >
                <img
                  className="w-[400px] h-[300px] object-cover object-top"
                  src={template.image}
                  alt={template.code}
                />
              </div>
            );
          })}
        </div>
        <DialogFooter>
          <Button variant="outline">取消</Button>
          <Button
            onClick={() => {
              onSelect(selectedTemplate);
              onClose();
            }}
          >
            确定
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
